<template>
  <div>
    Test
    {{ num }}
    <button @click="num++">update num</button>
  </div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  setup() {
    const num = ref(1)
    // #1 Vue3 把 Vue2 beforeCreate 和 created 换成了 setup
    // #2 组合 API 的生命周期可以写多次
    console.log('#1 setup')
    onBeforeMount(() => {
      console.log('#2.1 onBeforeMount')
    })
    onBeforeMount(() => {
      console.log('#2.2 onBeforeMount')
    })
    onMounted(() => {
      console.log('#3 onMounted')
    })
    onBeforeUpdate(() => {
      console.log('数据更新 onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('数据更新 onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
    return {
      num,
    }
  },
}
</script>

<style lang="scss" scoped></style>
